<template>
  <d2-container>
    <el-card shadow="hover">
      <el-form :inline="true">
        <el-form-item>
          <el-radio-group v-model="charts_type">
            <el-radio :label="1">近一月</el-radio>
            <el-radio :label="2">近一月</el-radio>
            <el-radio :label="3">近一月</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="charts_time_quantum"
            type="monthrange"
            range-separator="至"
            start-placeholder="开始月份"
            end-placeholder="结束月份"
          />
        </el-form-item>
        <el-form-item>
          <el-select v-model="charts_limit">
            <el-option v-for="item in limit" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary">搜索</el-button>
        </el-form-item>
      </el-form>

      <el-divider />

      <!-- 选用分析展示数据 -->
      <choose-analysis />

      <el-divider />

      <!-- 市场占有量分析 -->
      <bazzar-have />
    </el-card>

    <!-- 教材选用详情 -->
    <book-have-table :area-list="area_list" />

    <!-- 市场占有量详情 -->
    <bazaar-have-table :area-list="area_list" />
  </d2-container>
</template>

<script>
import ChooseAnalysis from './components/ChooseAnalysis'
import BazzarHave from './components/BazaarHave'
import BookHaveTable from './components/BookHaveTable'
import BazaarHaveTable from './components/BazaarHaveTable'

import { mapGetters } from 'vuex'
export default {
  name: 'Textbookcae',
  components: {
    ChooseAnalysis,
    BazzarHave,
    BookHaveTable,
    BazaarHaveTable
  },
  data() {
    return {
      // 图表 时间 类型
      charts_type: '',
      // 图表 时间段
      charts_time_quantum: '',
      // 图表 limit
      charts_limit: ''
    }
  },
  computed: {
    ...mapGetters({
      limit: 'd2admin/limit/getLimit',
      area_list: 'd2admin/area/getArea'
    })
  },
  watch: {
    charts_time_quantum(newValue) {
      if (newValue) {
        this.charts_type = 0
      }
    },
    charts_type(newValue) {
      if (newValue) {
        this.charts_time_quantum = ''
      }
    }
  }
}
</script>
